<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />

	<style>
		body {
			background-color: black;
			font-weight: bold;
			font-size: large;
		}

		video {
			position: absolute;
		}

		#stats {
			position: fixed;
			right: 0;
			bottom: 0;
			pointer-events: none;
			/* text contrast */
			text-shadow: black 0 0 0.3em;
		}
	</style>
</head>

<body>
	<script type="text/javascript" src="./peer-stream.js"></script>

	<video is="peer-stream" audio> </video>

	<!-- WebRTC monitor -->
	<pre id="stats">Not connected</pre>
	<script type="text/javascript">
		ps.addEventListener("playing", aggregateStats, { once: true });
		ps.addEventListener("message", (e) => { });
		ps.addEventListener("suspend", (e) => { });
    ps.addEventListener("playerdisconnected", (e) => {
      console.log("playerdisconnected")
     });

		async function aggregateStats() {
			const statsReport = await ps.pc.getStats(null);
			stats.innerText = "";

			// most < 27
			if (ps.VideoEncoderQP < 27) {
				stats.style.color = "lime";
			} else if (ps.VideoEncoderQP < 36) {
				stats.style.color = "orange";
				stats.innerText += `\n Spotty Network !`;
			} else {
				stats.style.color = "red";
				stats.innerText += `\n Bad Network !!`;
			}

			stats.innerText += `\n Video Quantization Parameter: ${ps.VideoEncoderQP}`;
			statsReport.forEach((stat) => {
				switch (stat.type) {
					case "data-channel": {
						stats.innerText += `\n ✉ Data Channel ↑↑ ${stat.bytesSent.toLocaleString()} B`;
						stats.innerText += `\n ✉ Data Channel ↓↓ ${stat.bytesReceived.toLocaleString()} B`;
						break;
					}
					case "inbound-rtp": {
						if (stat.mediaType === "video")
							stats.innerText += [``,
								`	Size: ${stat.frameWidth} x ${stat.frameHeight}`,
								`	Frames Decoded: ${stat.framesDecoded.toLocaleString()}`,
								`	Packets Lost: ${stat.packetsLost.toLocaleString()}`,
								`	FPS: ${stat.framesPerSecond} Hz`,
								`	Frames Dropped: ${stat.framesDropped}`,
								`	Video ↓↓ ${stat.bytesReceived.toLocaleString()} B`
							].join('\n');
						else if (stat.mediaType === "audio")
							stats.innerText += `\n ♬ Audio ↓↓ ${stat.bytesReceived.toLocaleString()} B`;
						break;
					}
					case "candidate-pair": {
						if (stat.state === "succeeded")
							stats.innerText += `\n Latency(RTT): ${stat.currentRoundTripTime} s`;
						break;
					}
					case "remote-candidate": {
						stats.innerText += `\n ` + stat.protocol + ":// " + stat.ip + ": " + stat.port;
						break;
					}
					case "transport": {
						const bitrate =
							~~(((stat.bytesReceived - this.bytesReceived)
								/ (stat.timestamp - this.timestamp)) *
								(1000 * 8));

						stats.innerText += `\n ⇌ Bitrate: ${(bitrate).toLocaleString()} bps`;

						this.bytesReceived = stat.bytesReceived;
						this.timestamp = stat.timestamp;
						break;
					}
					default: {
					}
				}
			});

			stats.innerText += `\n ⏲ Current Time: ${ps.currentTime} s`;

			ps.timeout = setTimeout(aggregateStats, 1000);
		}
	</script>
</body>

</html>